<html>
  <head>
    <style></style>
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <style>
      html,body { margin: 0; padding: 0; }
      .box canvas {
        border-right: 1px solid #aaaaaa40;
        border-bottom: 1px solid #aaaaaa40;
        background-image:
        linear-gradient(#aaaaaa40 1px, transparent 0),
        linear-gradient(90deg, #aaaaaa40 1px, transparent 0),
        linear-gradient(#aaa 1px, transparent 0),
        linear-gradient(90deg, #aaa 1px, transparent 0);
        background-size: 10px 10px, 10px 10px, 50px 50px, 50px 50px;
      }
      .list {
        width: 910px;
        overflow: hidden;
        border-top: 1px solid #f0f0f0;
        border-left: 1px solid #f0f0f0;
      }
      .box {
        width: 300;
        min-height: 220;
        float: left;
        border-right: 1px solid #f0f0f0;
        border-bottom: 1px solid #f0f0f0;
        padding: 10px 0;
      }
      .box .title {
        text-align: center;
        font-size: 14px;
        color: #000;
        display: inline-block;
        height: 20px;
        line-height: 20px;
        width: 100%;
        font-family: monospace;
      }
    </style>
  </head>
  <body>

    <div class="list">
      <div class="box" id="mount-1">
        <div class="title">Scroll by scrollX/scrollY</div>
      </div>
      <div class="box" id="mount-2">
        <div class="title">Scroll by WheelEvent</div>
      </div>
    </div>

    <script src="../../../packages/board/dist/index.global.js"></script>
    <script>
      var opts = {
          width: 300,
          height: 200,
          contextWidth: 500,
          contextHeight: 450,
          devicePixelRatio: 4,
          canScroll: true,
          scrollConfig: {
            color: '#666666',
            lineWidth: 8
          }
        }
      function drawBoard(board) {
        const ctx = board.getContext();

        // ctx.setFillStyle('#ffffff');
        // ctx.fillRect(0, 0, opts.contextWidth, opts.contextHeight);

        ctx.setFillStyle('#f0f0f0');
        ctx.fillRect(5, 5, 100, 60);

        ctx.setFillStyle('#cccccc');
        ctx.fillRect(40, 40, 100, 60);

        ctx.setFillStyle('#c0c0c0');
        ctx.fillRect(80, 80, 100, 60);

        ctx.setFillStyle('#e0e0e0');
        ctx.fillRect(130, 130, 100, 50);

        ctx.setFillStyle('#e0e0e0');
        ctx.fillRect(250 - 5, 250 - 5, 100, 50);

        ctx.setFillStyle('#c0c0c0');
        ctx.fillRect(300, 300, 100, 50);

        ctx.setFillStyle('#cccccc');
        ctx.fillRect(380, 380, 100, 50);

        ctx.setFillStyle('#000');
        ctx.fillRect(250 - 5, 225 - 5, 10, 10);
      }
    </script>
    <script>
      (function() {
        const { Board } = window.iDrawBoard; 
        const mount = document.querySelector('#mount-1');
        const board = new Board(mount, opts);
        // board.on('wheelX', (deltaX) => {
        //   console.log('deltaX =', deltaX);
        // })
        // board.on('wheelY', (deltaY) => {
        //   console.log('deltaY =', deltaY);
        // })

        drawBoard(board)

        // board.scale(1.5);
        board.scrollX(-100);
        board.scrollY(-125);
        // board.scale(1);

        // const result = board.scale(1);
        const result = board.scale(1);
        console.log('result =', result);
        board.draw();

        console.log('scrollLineWidth = ', board.getScrollLineWidth())
      })()

    </script>

    <script type="module">
      import event from '../../../scripts/browser/event.js';
      (function() {
        const { Board } = window.iDrawBoard; 
        const mount = document.querySelector('#mount-2');
        const board = new Board(mount, opts);
        drawBoard(board)
        board.draw();

        setTimeout(() => {
          event.wheelX(100, {
            clientX: 350,
            clientY: 100,
          });
          event.wheelY(125, {
            clientX: 350,
            clientY: 100,
          });
        }, 500);
      })()

    </script>
  </body>
</html>